<template>
  <div class="detail">
    <div class="container" v-for="item of detail" :key="item.id">
      <div
        class="bg"
        style="background-img: url(`item.pic`); background-repeat: no-repeat; background-size: cover;"
      >
        <div class="header">
          <div class="title">{{ item.title }}</div>
          <div class="where">
            <span class="form">{{ item.labels[1] }}</span> ·
            <span class="date">{{ item.labels[0] }}</span>
          </div>
          <span class="evaluate">{{ item.evaluate }}</span>
          <span class="evaluate-color">条评论</span>
        </div>
      </div>
      <img class="pic" :src="item.pic">

      <div class="content">
        <div class="name">{{ item.title }}</div>
        <div class="rating-star">
          <span>评分</span>
          <!-- <block v-for="star of item.star" :key="star.id">
            <img v-if="star>=1" src="../../../assets/images/icon/star.png">
            <img v-else src="../../../assets/images/icon/none-star.png">
          </block> -->
          <span class="rating">{{ item.rating }}</span>
        </div>
        <div class="type">
          <span>类型</span>
          <span>{{ item.labels[2] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            detail:[],
        }
    },
    mounted() {
        var {id} = this.$route.params;
        this.$http(`http://122.112.161.135:4000/api/movieDetail?id=${id}`).then(res=>{
            console.log(res);
            this.detail = res.data.res
        })
    },
};
</script>

<style scoped>
.header {
    width: 100%;
    height: 4rem;
    position: relative;
    padding: 1rem;
}

.pic {
    width: 3rem;
    height: 2.5rem;
    position: absolute;
    right: 1rem;
    top: 5rem;
}

.title {
    color: #fff;
    font-weight: 600;
    font-size: 0.5rem;
    letter-spacing: 6rpx;
    margin-bottom: 30rpx;
}

.where {
    font-size: 25rpx;
    margin-bottom: 80rpx;
    color: #fff;
}

.evaluate {
    color: #ee1246;
    font-size: 20rpx;
    margin-right: 20rpx;
}

.evaluate-color {
    color: #666;
    font-size: 20rpx;
}

.content img {
    width: 20rpx;
    height: 20rpx;
}

.content {
    padding: 30rpx;
}

.name {
    font-size: 28rpx;
    margin: 30rpx 0;
}

.content span {
    font-size: 23rpx;
    margin-right: 40rpx;
}

.rating {
    margin-left: 20rpx;
}
.bg{
    z-index: -2;
    height: 300rpx;
    position: relative;
    overflow: hidden;
}
.bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(168, 163, 163, 0.8);
    z-index: -1;
    filter: blur(200rpx);
    margin: -200rpx;
}
</style>